<template>
  <div class="friend">
    <div class="header padding-24 space-between bg-active">
      <div class="h-back">
        <img :src="mic" alt />
      </div>
      <div class="title fs-36 color-f">{{title}}</div>
      <div class="h-right">
        <img :src="play" alt="">
      </div>
    </div>
    <div class="my-focus bg-f padding-24">
      <div class="top arrow-right center-col" @click="gotomyfocus">我关注的人</div>
      <div class="my-focuslist flex" v-if="focuslist[0]">
        <div class="list-item" v-for="(item,index) in focuslist" :key="index" @click="gotouserinfo(item.user_love_id)">
          <div class="cove">
            <img :src="item.user_avator" alt="" class="cove">
            <!-- <span class="point bg-r" v-if="item.news==true"></span> -->
            <div class="loge" v-if="item.is_singer==1||item.is_vip==1">
                <img :src="musicer" alt="" v-if="item.is_singer==1">
                <img :src="vip" alt="" v-if="item.is_vip==1&&item.is_singer==2">
            </div>
          </div>
          <p class="fs-26 overFlow">{{item.nickname}}</p>
        </div>
      </div>
      <div class="center" v-else>你还没有关注的人哦</div>
    </div>
    <div class="type-choose padding-24 center-col">
      <div class="right center-col" :class="open==true?'arrow-up':'arrow-down'" @click="toopen">
        <p>{{selected}}</p>
      </div>
      <div class="select bg-f" v-if="open">
        <div class="list-item center" v-for="(item,index) in selectlist" :key="index" @click="choose(item)">{{item.title}}</div>
      </div>
    </div>
    <div class="dynamic-list " v-if="dynamiclist[0]">
        <div class="list-item padding-24 bg-f" v-for="(item,index) in dynamiclist" :key="index">
            <div class="head space-between">
                <img :src="item.user_avator" alt="" @click="gotouserinfo(item.user_id)">
                <div class="right space-between ">
                  <div class="flex-column">
                    <div class="center-col">
                        <p class="name fs-30" @click="gotouserinfo(item.user_id)">{{item.nickname}}</p>
                        <p class="fs-28 color-6">{{item.dynamic_type==1?'发布动态':(item.dynamic_type==2?'发布视频':'转发')}}</p>
                    </div>
                    <p class="fs-22 color-9">{{item.timeago}}</p>
                  </div>
                  <div class="gzh bg-p color-f fs-24 center" v-if="item.is_attention==0&&userinfo.user_id!=item.user_id" @click="tocollect(item.user_id)">+关注</div>
                </div>
            </div>
            <div class="content space-between" @click="gotodynamicDetails(item.id)">
                <div class="none"></div>
                <div class="right">
                    <p class="text fs-32" v-if="item.dynamic_type!=3">{{item.content}}</p>
                    <p class="text fs-32" v-if="item.dynamic_type==3">{{item.viewpoint}}</p>
                    <div class="img-list flex wrap" v-if="item.image_url&&item.dynamic_type!=3">
                        <img :src="items" alt="" v-for="(items,indexs) in item.image_url" :key="indexs" @click.stop="lookimg(item.image_url)" :class="{oneimg:item.image_url.length==1}">
                    </div>
                    <div class="video" v-if="item.video_url&&item.dynamic_type!=3">
                      <video :src="item.video_url" autoplay :poster="item.video_cover" controls  v-if="item.id==id"></video>
                      <div class="img" v-else @click.stop="playvideo(item)">
                        <img :src="item.video_cover" alt="">
                        <div class="play center yuan">
                          <p class="play-btn"></p>
                        </div>
                      </div>
                    </div>
                    
                    <div class="forwarding bg-f5 padding-24" v-if="item.dynamic_type==3">
                      <p class="text fs-32">
                        <span @click.stop="gotouserinfo(item.original_dynamic_user_id)">@{{item.original_dynamic_user_name.nickname}}</span>{{item.content}}
                      </p>
                      <div class="video" v-if="item.video_url">
                        <video :src="item.video_url" autoplay :poster="item.video_cover"  v-if="item.id==id"></video>
                        <div class="img" v-else @click.stop="playvideo(item)">
                          <img :src="item.video_cover" alt="">
                          <div class="play center yuan">
                            <p class="play-btn"></p>
                          </div>
                        </div>
                      </div>
                      
                      <div class="forwardingimg-list flex wrap" v-if="item.image_url">
                          <img :src="items" alt="" v-for="(items,indexs) in item.image_url" :key="indexs" @click.stop="lookimg(item.image_url)" :class="{oneimg:item.image_url.length==1}">
                      </div>
                    </div>
                    <div class="share space-between padding-24" v-if="item.music_list_photo">
                        <img :src="item.music_list_photo" alt="">
                        <div class="right flex-column">
                            <p class="fs-32 color-0 overFlow">{{item.music_list_name}}</p>
                            <p class="fs-24 color-6">{{item.singer_name}}</p>
                        </div>
                    </div>
                    <div class="foot space-between">
                        <div class="left space-between">
                            <div class="center-col" @click.stop="gotoforwarding(item.id)">
                                <img :src="zhuanfa" alt="">
                                <p class="fs-32 color-9">{{item.forward_number}}</p>
                            </div>
                            <div class="center-col">
                                <img :src="dianzan" alt="" v-if="item.is_click==0" @click.stop="tozan(item.id)">
                                <img :src="zan" alt="" v-else @click.stop="tozan(item.id)">
                                <p class="fs-32 color-9">{{item.click_number}}</p>
                            </div>
                            <div class="center-col">
                                <img :src="comment" alt="">
                                <p class="fs-32 color-9">{{item.comment_number}}</p>
                            </div>
                        </div>
                        <img :src="more" alt="" class="more" @click.stop="toshare(item)">
                    </div>
                </div>
            </div>
        </div>
        <div class="center" @click="getmore">-- {{text}} --</div>
    </div>
    <div class="logout lookimg center" @touchmove.prevent v-if="look" @click="look=false">
      <div class="img-box">
        <!-- <img :src="imgshow" alt=""> -->
        <swiper :options="swiperOption" class="swiper" v-if="imgshow.length > 0">
            <swiper-slide v-for="(item,index) in imgshow" :key="index">
                <img :src="item" alt class="imgList" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
    <!-- 发布动态按钮 -->
    <div class="public-btn bg-p yuan" @click="ispublic=true">
      <img :src="public" alt="">
      <p class="center fs-24 color-f">发布</p>
    </div>
    <div class="logout pubic-model" @touchmove.prevent v-if="ispublic">
      <div class="box bg-f5">
        <div class="del" @click="ispublic=false">
          <img :src="del" alt="">
        </div>
        <div class="space-around">
          <div class="yuan bg-f" @click="gotopublic(1)">
            <img :src="dynamic" alt="" class="dynamic">
            <p class="fs-32 center">动态</p>
          </div>
          <div class="yuan bg-f" @click="gotopublic(2)">
            <img :src="video" alt="" class="video">
            <p class="fs-32 center">视频</p>
          </div>
        </div>
      </div>
    </div>
    <div class="logout share-box" @touchmove.prevent v-if="share">
      <div class="bg-f5 ">
        <div class="top space-between padding-24">
          <p class="fs-32">分享</p>
          <img :src="del" alt="" @click="share=false">
        </div>
        <div class="space-around padding-24">
          <div class="cell">
            <img :src="wx" alt="">
            <p>微信好友</p>
          </div>
          <div class="cell">
            <img :src="pyq" alt="">
            <p>微信朋友圈</p>
          </div>
          <div class="cell">
            <img :src="weibo" alt="">
            <p>微博</p>
          </div>
        </div>
        <div class="center-col padding-24">
          <div class="cell" v-if="isme" @click="todelete">
            <img :src="dele" alt="">
            <p>删除</p>
          </div>
          <div class="cell" v-else>
            <img :src="report" alt="">
            <p>举报</p>
          </div>
        </div>
      </div>
    </div>
    <Footer v-bind:titles="title"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer-nav";
export default {
  name: "Friend",
  data() {
    return {
      title: "朋友",
      open:false,
      look:false,
      ispublic:false,
      share:false,
      isme:true,
      id:'',
      obj:'',
      dynamic:require("../../assets/frend/dynamic.png"),
      video:require("../../assets/frend/video.png"),
      del:require("../../assets/account/del.png"),
      public:require("../../assets/frend/public.png"),
      mic:require("../../assets/index/microphone.png"),
      play:require("../../assets/index/play.png"),
      musicer:require('../../assets/account/musicer.png'),
      vip:require('../../assets/account/vip.png'),
      wx:require('../../assets/frend/weixin.png'),
      weibo:require('../../assets/frend/weibo.png'),
      pyq:require('../../assets/frend/pyq.png'),
      dele:require('../../assets/frend/delete.png'),
      report:require('../../assets/frend/report.png'),
      focuslist:[],
      selected:'显示全部',
      selectlist:[
        {
          title:'显示关注的人的动态',
          value:2,
        },
        {
          title:'显示全部',
          value:'',
        }
      ],
      zhuanfa:require('../../assets/account/zhuanfa.png'),
      dianzan:require('../../assets/account/dianzan.png'),
      zan:require('../../assets/account/zan.png'),
      comment:require('../../assets/account/comment.png'),
      more:require('../../assets/index/more.png'),
      imgshow:[],
      dynamiclist:[],
      text:"点击加载更多",
      page:1,
      total:0,
      userinfo:'',
      userid:'',
      type:'',
      swiperOption: {
        // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        // 循环
        loop: false,
        // 设定初始化时slide的索引
        initialSlide: 0,
        // 滑动速度
        speed:300,
        // 滑动方向
        loopedSlides :1,
        direction: 'horizontal',
        // 小手掌抓取滑动
        grabCursor: true,
        slidesPerView: 'auto',
        pagination: {
            el: '.swiper-pagination'
          },
        on: {
        // 滑动之后回调函数
        slideChangeTransitionStart: function () {
            /* realIndex为滚动到当前的slide索引值 */
            this.imgIndex = this.realIndex - 1
          }
        },
      },
    };
  },
  components: {
    Footer
  },
  created() {
    this.getuserinfo()
    this.getdynamiclist()
    this.getmyfocuslist()
  },
  methods: {
    getuserinfo(){
      var url = this.$host1 + `home/getPersonalMsg`;
        this.$axios.get(url).then(res => {
        //console.log(res)
        //return
        if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
            this.userinfo=resData.data
          } else if(resData.code == 0){
            // this.$router.push('/login');
          }else{
            this.AlertWin(resData.message);
          }
        }
      }).catch(() => {
        this.AlertWin("网络错误！请稍后重试！");
      });
    },
    getdynamiclist(){
      let url = this.$host1 + `home/friend/loveUserDynamic`
      this.$axios.get(url,{
        params:{
            user_id:this.userid,
            pageSize:50,
            page:this.page,
            type:this.type
        }
      }).then(res => {
        console.log(res)
        //return
        if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
            //this.dynamiclist=resData.data.result
            this.total=resData.data.total_number
            if(this.page==1){
                this.dynamiclist=resData.data.result
            }else{
                this.dynamiclist=this.dynamiclist.concat(resData.data.result)
            }
            for(var i=0;i<this.dynamiclist.length;i++){
              //this.dynamiclist[i].publish_time=this.dynamiclist[i].publish_time
              this.dynamiclist[i].timeago=this.common.timeago(this.dynamiclist[i].publish_time*1000)
            }
            if(this.page<this.total/50){
                this.text="点击加载更多"
            }else{
                this.text="END"
            }
          }else{
            this.dynamiclist=[]
            this.AlertWin(resData.message);
          }
        }
      }).catch(() => {
        this.dynamiclist=[]
        this.AlertWin("网络错误！请稍后重试！");
      });
    },
    getmore(){
      if(this.page<this.total/50){
          this.page++
          this.AlertWin('加载中，请稍等！')
          this.getdynamiclist()
          
      }else{
          this.AlertWin('没有更多数据啦！')
      }
    },
    getmyfocuslist(){
      var url = this.$host1 + `home/friend/loveUser`;
        this.$axios.get(url).then(res => {
        //console.log(res)
        //return
        if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
            this.focuslist=resData.data
          } else{
            this.AlertWin(resData.message);
          }
        }
      }).catch(() => {
        this.AlertWin("网络错误！请稍后重试！");
      });
    },
    toopen(){
      this.open=true
    },
    choose(i){
      this.page=1
      this.type=i.value
      if(this.type==''){
        this.userid=''
      }else{
        this.userid=this.userinfo.user_id
      }
      this.getdynamiclist()
      this.selected=i.title
      this.open=false
    },
    lookimg(i){
      //console.log(i)
      this.look=true
      this.imgshow=i
    },
    gotopublic(i){
      this.$router.push({
          path: '/publicDynamic',
          query: {
              type: i,
          }
      })
    },
    playvideo(i){
      this.id=i.id
      //this.getdynamiclist()
      //console.log(i)
    },
    gotodynamicDetails(id){
      this.$router.push({
          path: '/dynamicDetails',
          query: {
              id: id,
          }
      })
    },
    tocollect(id){
      let url = this.$host1 + `home/friend/eachAttention`
      var data={
        user_love_id:id
      }
      this.$axios.post(url,data).then(res => {
        //console.log(res)
        //return
        if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
            //this.userinfo=resData.data
            this.page=1
            this.AlertWin("关注成功！");
            this.getdynamiclist()
            this.getmyfocuslist()
          }else{
            this.AlertWin(resData.message);
          }
        }
      }).catch(() => {
        this.AlertWin("网络错误！请稍后重试！");
      });
    },
    tozan(id){
      let url=this.$host1+`home/dynamic/ClickRecord`
      var data={
        dynamic_id:id
      }
      this.$axios.post(url,data).then(res => {
          console.log(res)
          //return
          if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              //this.AlertWin("发表成功！");
              this.page=1
              this.getdynamiclist()
          }else{
              
              this.AlertWin(resData.message);
          }
          }
      }).catch(() => {
          
          this.AlertWin("网络错误！请稍后重试！");
      });
    },
    gotoforwarding(id){
      this.$router.push({
          path: '/forwarding',
          query: {
              id: id,
          }
      })
    },
    toshare(i){
      //console.log(i)
      this.obj=i
      if(i.user_id==this.userinfo.user_id){
        this.isme=true
      }else{
        this.isme=false
      }
      this.share=true
    },
    todelete(){
      let url = this.$host1 + `home/dynamic/deleteDynamic`
      var data={
        dynamic_id:this.obj.id
      }
      this.$axios.post(url,data).then(res => {
          console.log(res)
          //return
          if (res.status == 200) {
          let resData = res.data;
          if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.AlertWin("删除成功");
              this.page=1
              this.getdynamiclist()
              this.share=false
          }else{
              
              this.AlertWin(resData.message);
          }
          }
      }).catch(() => {
          
          this.AlertWin("网络错误！请稍后重试！");
      });
    },
    gotomyfocus(){
      this.$router.push('/myattention')
    },
    gotouserinfo(i){
      this.$router.push({
          path: '/singerhome',
          query: {
              user_id: i,
          }
      })
    },

  }
};
</script>
<style lang="scss">
.friend {
  .header{
      width: 100%;
      height: 1rem;
      .h-back{
          width: 0.38rem;
          height: 0.49rem;
          img{
            height: 100%;
              //transform: rotate(180deg);
              width: 100%;
          }
      }
      .title{
          font-size: 0.36rem;
          font-weight: bold;
      }
      .h-right{
          width: 0.38rem;
          height: 0.5rem;
          img{
              display: inline-block;
              width: 100%;
          }
      }
      .h-share{
          position: absolute;
          right: 1rem;
          width: 0.45rem;
          height: 0.43rem;
          img{
              width: 100%;
              height: 100%;
          }
      }
  }
  .my-focus{
    height: auto;
    padding-bottom: 0.2rem;
    margin-top: 1rem;
    .top{
      height: 1rem;
    }
    .my-focuslist{
      width: 100%;
      //background-color: greenyellow;
      height: 1.3rem;
      overflow-x: scroll;
      .list-item{
        width:1rem;
        height: 100%;
        text-align: center;
        margin-right: 0.2rem;
        .cove{
          margin: 0 auto;
          width: 0.9rem;
          height: 0.9rem;
          position: relative;
          .cove{
              width: 0.9rem;
              height: 0.9rem;
              border-radius: 50%;
              object-fit: cover;
          }
          .point{
              width: 0.16rem;
              height: 0.16rem;
              position: absolute;
              border-radius: 50%;
              right: 0;
              top: 0;
          }
          .loge{
              width: 0.32rem;
              height: 0.32rem;
              position: absolute;
              border-radius: 50%;
              bottom: 0;
              right: 0;
              img{
                  width: 100%;
                  height: 100%;
              }
          }
        }
      }
      .list-item:last-child{
        margin-right: 0!important;
      }
    }
  }
  .type-choose{
    height: 0.75rem;
    position: relative;
    //background-color: aquamarine;
    .right{
      position: absolute;
      right: 0.24rem;
    }
    .select{
      width: 3rem;
      height: auto;
      z-index: 9;
      position: absolute;
      right: 0.24rem;
      top: 0.7rem;
      border-radius: 0.15rem;
      -moz-box-shadow:0 0 0.1rem #666;
      -webkit-box-shadow:0 0px 0.1rem #666;
      box-shadow:0 0 0.1rem #666; 
      .list-item{
        height: 0.8rem;
        border-bottom: 0.01rem solid #e9e9e9;
      }
      .list-item:last-child{
        border: none!important
      }
    }
    .select::before{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: 1.5rem;
      //top: 0;
      top: -0.1rem;
      transform: rotate(-135deg);
      border-right: 0.1rem solid #fff;
      border-bottom: 0.1rem solid #fff;
      border-top: 0.1rem solid transparent;
      border-left: 0.1rem solid transparent;
    }
  }
  .dynamic-list{
    //margin-top: 1rem;
    margin-bottom: 1.2rem;
    .list-item{
        height: 100%;
        border-bottom: 0.01rem solid #e9e9e9;
        .head{
            height: 1.2rem;
            img{
                width: 0.75rem;
                height: 0.75rem;
                border-radius: 50%;
                object-fit: cover;
            }
            .right{
                width: calc(100% - 1rem);
                height: 0.75rem;
                .name{
                    color: #3875D1;
                    margin-right: 0.2rem;
                }
                .gzh{
                  width: 1.05rem;
                  height: 0.44rem;
                  border-radius: 0.22rem;
                }
            }
        } 
        .content{
          
            margin-top: 0.1rem;
            height: auto;
            padding-bottom: 0.2rem;
            .none{
                width: 0.75rem;
                height: auto;
            }
            .right{
                width: calc(100% - 1rem);
                height: auto;
                .text{
                    line-height: 0.4rem;
                }
                .img-list{
                    width: 100%;
                    height: auto;
                    img{
                        width: 1.9rem;
                        height: 1.9rem;
                        object-fit: cover;
                        border-radius: 0.1rem;
                        margin: 0.1rem 0.05rem 0;
                    }
                    .oneimg{
                      width: auto;
                      max-width: 100%;
                      height: auto;
                      max-height: 5rem;
                      object-fit: cover;
                      border-radius: 0.1rem;
                    }
                }
                .video{
                    margin-top: 0.1rem;
                    width: 100%;
                    height: 3.4rem;
                    border-radius: 0.05rem;
                    .img{
                      width: 100%;
                      height: 100%;
                      position: relative;
                      border-radius: 0.05rem;
                      img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 0.05rem;
                      }
                      .play{
                        width: 1rem;
                        height: 1rem;
                        border: 0.01rem solid rgba(255, 255, 255, 0.8);
                        background-color: rgba(0, 0, 0, 0.5);
                        position: absolute;
                        top: 50%;
                        margin-top: -0.5rem;
                        left: 50%;
                        margin-left: -0.5rem;
                        //border-radius: 0.05rem;
                        .play-btn{
                          width: 0;
                          height: 0;
                          margin-left: 0.4rem;
                          width: 0px;
                          height: 0px;
                          border-left: 0.3rem solid transparent;
                          border-top: 0.2rem solid transparent;
                          border-right: 0.3rem solid #fff;
                          border-bottom: 0.2rem solid transparent;
                          opacity: 0.7;
                          transform: rotate(180deg);
                        }
                      }
                      
                    }
                    
                    video{
                        width: 100%;
                        height: 100%;
                        background-color: #444;
                        border-radius: 0.05rem;
                    }
                }
                .share{
                    width: 100%;
                    height: 1.2rem;
                    background-color: #f5f5f5;
                    margin-top: 0.1rem;
                    border-radius: 0.05rem;
                    img{
                        width: 0.87rem;
                        height: 0.87rem;
                        object-fit: cover;
                        border-radius: 0.06rem;
                    }
                    .right{
                        width: calc(100% - 1rem);
                        height: 0.8rem;

                    }
                }
                .forwarding{
                  padding-top:0.001rem; 
                  margin-top: 0.1rem;
                  width: 100%;
                  height: auto; 
                  border-radius: 0.1rem;
                  padding-bottom:0.2rem; 
                  .text{
                    margin-top: 0.2rem;
                    span{
                      color: #3875D1;
                      margin-right: 0.3rem;
                    }
                  }
                  video{
                    width: 100%;
                    height: 3.25rem;
                    margin-top: 0.1rem;
                    border-radius: 0.05rem;
                  }
                  .forwardingimg-list{
                    width: 100%;
                    height: auto;
                    img{
                        width: 1.74rem;
                        height: 1.74rem;
                        object-fit: cover;
                        border-radius: 0.1rem;
                        margin: 0.1rem 0.05rem 0;
                    }
                    .oneimg{
                      width: auto;
                      max-width: 100%;
                      height: auto;
                      max-height: 4rem;
                      object-fit: cover;
                      border-radius: 0.1rem;
                    }
                  }
                }
                .foot{
                    width: 100%;
                    height: 1rem;
                    .left{
                        width: 5rem;
                        height: 100%;
                        //background-color: greenyellow;
                        img{
                            width: 0.3rem;
                            height: 0.3rem;
                            margin-right: 0.2rem;
                        }
                    }
                    .more{
                        width: 0.08rem;
                        height: 0.3rem;
                    }
                }
            }
        }
    }
    .center{
      height: 1rem;
    }
  }
  .lookimg{
    background-color: rgba(0, 0, 0, 1);
    .img-box{
      width: 100%;
      height: 100%;
      //background-color: #fff;
      .swiper{
          width: 100%;
          height: 100%;
          //background-color: red;
          // max-height: 80%!important;
          .swiper-wrapper{
            // width: 100%;
            // height: 100%!important;
            display: flex;
            align-items: center;
            //background-color: blue;
            .swiper-slide{
              //margin-right: 0.2rem;
                width:100%!important;
                height: 100%!important;
                //position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                //background-color: green;
                img{
                  width: 100%;
                  height: auto;
                  max-height: 100%;
                  object-fit: cover
              }
            }
            
          }
          .swiper-pagination{
            width: auto;
            //height: 0.2rem;
            //background-color: #fff;
            //z-index: 9;
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 1rem;
            left: 50%;
            //top: 50%;
            transform: translate(-50%,0);
            margin: 0 auto;
            .swiper-pagination-bullet{
              width: 0.2rem;
              height: 0.2rem;
              text-align: center;
              line-height: 0.2rem;
              font-size: 0.24rem;
              background-color: #fff;;
            }
            .swiper-pagination-bullet-active{
              background-color: #fff;
            }
          }
          
      }
    }
  }
  .public-btn{
    width: 1.08rem;
    height: 1.08rem;
    position: fixed;
    //z-index: 9;
    bottom: 1.5rem;
    right: 0.24rem;
    img{
      width: 0.37rem;
      height: 0.43rem;
      margin: 0.15rem auto 0;
    }
  }
  .pubic-model{
    .box{
      position: absolute;
      width: 100%;
      height: 3.8rem;
      bottom: 0;
      left: 0;
      border-radius: 0.2rem 0.2rem 0 0;
      .del{
        width: 0.3rem;
        height: 0.3rem;
        position: absolute;
        right: 0.25rem;
        top: 0.25rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .space-around{
        margin-top: 1.4rem;
        .yuan{
          width: 1.6rem;
          height: 1.6rem;
          .dynamic{
            width: 0.56rem;
            height: 0.52rem;
            margin: 0.25rem auto 0.1rem;
          }
          .video{
            width: 0.6rem;
            height: 0.44rem;
            margin: 0.25rem auto 0.1rem;
          }
        }
      }
    }
  }
  .share-box{
    .bg-f5{
      width: 100%;
      height: 6rem;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0.2rem 0.2rem 0 0;
      .top{
        height: 1rem;
        //background-color: greenyellow;
        img{
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .space-around{
        height: 2.3rem;
        border-bottom: 0.01rem solid #e9e9e9;
        //background-color: greenyellow;
        .cell{
          text-align: center;
          img{
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 50%;

          }
          p{
            margin-top: 0.2rem
          }
        }
      }
      .center-col{
        height: 2.3rem;
        //border-bottom: 0.01rem solid #e9e9e9;
        //background-color: greenyellow;
        .cell{
          margin-left: 0.4rem;
          text-align: center;
          margin-right: 1rem;
          img{
            width: 1.15rem;
            height: 1.15rem;
            border-radius: 50%;

          }
          p{
            margin-top: 0.2rem
          }
        }
      }
    }
  }
}
</style>
